<template>
    <view v-show="!boxshow" class="box-cont">
        <view class="bus-box" :class="{ is_gray: isGrayFilter }" :style="'bottom:' + bottom + 'px;'">
            <view class="bus-box-txt">{{ businesstxt }}</view>
            <u-icon
                name="close"
                size="46"
                color="#BB0024"
                class="bus-close"
                @click="boxshow = !boxshow"
            ></u-icon>
        </view>
    </view>
</template>

<script>
export default {
    name: 'BusinessBox',
    data() {
        return {
            boxshow: this.businessshow,
        };
    },
    props: {
        businessshow: {
            type: Boolean,
            default: false,
        },
        businesstxt: {
            type: String,
            default: '',
        },
        bottom: {
            type: Number,
            default: 0,
        },
        isGrayFilter: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {},
    watch: {
        businessshow(value) {
            this.boxshow = value;
        },
    },
    onLoad() {},
};
</script>

<style lang="less">
.bus-box {
    position: fixed;
    // bottom: 0%;
    left: 10%;
    width: 80%;
    z-index: 19998;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .bus-box-txt {
        margin: 10rpx 20rpx;
        font-size: 26rpx;
        line-height: 48rpx;
        color: #f4f4f4;
        font-family: Arial, Helvetica, sans-serif;
    }
    .bus-close {
        margin-right: 20rpx;
    }
}
.is_gray {
    filter: grayscale(100%);
}
</style>
